<template>
  <div style="height: 1000px">
    {{ counter.count }}
    {{appStore.theme}}
    <a-button @click="counter.increment()">add</a-button>
    <a-button @click="counter.decrement()">a--</a-button>
    <img src="/vite.svg" alt="Vite logo">
    <div class="aaa">
      HelloWolrd
    </div>
    <comA />
    <div>
       <div>命名空间组件</div>
       <Form.Label />
       <Form.Input />
       <Form.Label>
          传递过来的slot
       </Form.Label>
    </div>
    <div>Props值: {{ msg }}{{ title }}</div>
  </div>
</template>
<script setup lang="ts">
import { h } from 'vue'
import { useCounterStore, useAppStore } from '@src/stores'
import * as Form from '@src/components/form'
const counter = useCounterStore()
const appStore = useAppStore()

// setup需开启 lang="ts"
interface Props {
  msg: string,
  title: boolean | number
}
const { msg = 'HelloWorld', title = 1 } = defineProps<Props>()

const comA = {
  render: () => {
    return h('span', null, '123')
  }
}

</script>

<style scoped lang="less">
.aaa {
  background: rgb(var(--arcoblue-6))
}
</style>